<template>
  <div>
    <a-form
      style="word-wrap: break-word"
      ref="formRef"
      :model="equipmentStore.searchForm"
      :style="{ width: '1600px' }"
      @submit="formSubmit"
      layout="inline"
    >
      <!-- 设备编码 -->
      <a-form-item field="size" label="设备编码" :style="{ width: '270px' }">
        <a-input
          v-model="equipmentStore.searchForm.devGId"
          placeholder="请输入设备编码"
          allow-clear
          style="width: 220px"
        />
      </a-form-item>
      <!-- 设备名称 -->
      <a-form-item field="size" label="设备名称" :style="{ width: '270px' }">
        <a-input
          v-model="equipmentStore.searchForm.devName"
          placeholder="请输入设备名称"
          allow-clear
          style="width: 220px"
        />
      </a-form-item>
      <!-- 设备类型 -->
      <a-form-item field="size" label="设备类型" :style="{ width: '220px' }">
        <!-- <a-input v-model="devTypeSearchKeyword" placeholder="请输入设备类型" allow-clear style="width:220px" />
         -->
        <a-select
          :default-value="''"
          allow-clear
          v-model="equipmentStore.searchForm.devTypeId"
          :style="{ width: '220px' }"
          placeholder="请选择设备类型"
          allow-search
        >
          <a-option v-for="dtl in devTypeList" :value="dtl.devTypeId" :key="dtl.id">{{ dtl.devTypeName }}</a-option>
        </a-select>
      </a-form-item>
      <!-- 设备标识 -->
      <a-form-item field="size" label="设备标识" :style="{ width: '220px' }">
        <!-- <a-input v-model="devTypeSearchKeyword" placeholder="请输入设备类型" allow-clear style="width:220px" />
         -->
        <a-select
          :default-value="''"
          allow-clear
          v-model="equipmentStore.searchForm.devFlagConfCode"
          :style="{ width: '220px' }"
          placeholder="请选择设备标识"
          allow-search
        >
          <a-option v-for="dfc in equipmentStore.$state.devFlagConfList" :value="dfc.dictCode" :key="dfc.id">{{
            dfc.dictName
          }}</a-option>
        </a-select>
      </a-form-item>
      <!-- 用户手机号 -->
      <!-- <a-form-item field="size" label="用户手机号" :style="{ width: '260px' }">
        <a-input
          v-model="equipmentStore.searchForm.userPhone"
          placeholder="请输入用户手机号"
          allow-clear
          style="width: 220px"
        />
      </a-form-item> -->
      <!-- 状态 -->
      <a-form-item field="size" label="状态" style="width: 200px">
        <a-select
          :style="`width:320px;${equipmentStore.$state.searchForm.devStatusName != '' ? 'padding-left: 28px;' : ''}`"
          v-model="equipmentStore.searchForm.devStatusName"
          placeholder="请选择设备状态"
          allow-clear
        >
          <a-option value="0184">
            <div cless="formSelect">
              <img class="formSelectIimg" src="../../images/zx.png" alt="" />
              <span>在线</span>
            </div>
          </a-option>
          <a-option value="0185">
            <div cless="formSelect">
              <img class="formSelectIimg" src="../../images/lx.png" alt="" />
              <span>离线</span>
            </div>
          </a-option>
          <a-option value="0186">
            <div cless="formSelect">
              <img class="formSelectIimg" src="../../images/jg.png" alt="" />
              <span>故障</span>
            </div>
          </a-option>
        </a-select>
        <div style="width: 0px" v-if="equipmentStore.$state.searchForm.devStatusName != ''">
          <img
            v-if="equipmentStore.$state.searchForm.devStatusName == '0184'"
            style="position: relative; left: -146px"
            class="formSelectIimg"
            src="../../images/zx.png"
            alt=""
          />
          <img
            v-else-if="equipmentStore.$state.searchForm.devStatusName == '0185'"
            style="position: relative; left: -146px"
            class="formSelectIimg"
            src="../../images/lx.png"
            alt=""
          />
          <img
            v-else
            style="position: relative; left: -146px"
            class="formSelectIimg"
            src="../../images/jg.png"
            alt=""
          />
        </div>
      </a-form-item>
      <!-- 激活状态 -->
      <a-form-item field="size" label="激活状态" :style="{ width: '270px' }">
        <!-- <a-input
          v-model="equipmentStore.searchForm.userPhone"
          placeholder="请输入用户手机号"
          allow-clear
          style="width: 220px"
        /> -->
        <a-select
          v-model="equipmentStore.$state.searchForm.activationStatus"
          :style="{ width: '320px' }"
          placeholder="请选择激活状态"
          allow-clear
        >
          <a-option :value="0">未激活</a-option>
          <a-option :value="1">已激活</a-option>
        </a-select>
      </a-form-item>
      <!-- 应用场景 -->
      <a-form-item field="size" label="应用场景" style="margin-top: 10px" :style="{ width: '270px' }">
        <a-select
          :style="{ width: '320px' }"
          v-model="equipmentStore.searchForm.applicationScenarios"
          placeholder="请选择应用场景"
          allow-search
          allow-clear
        >
          <a-option v-for="(daas, indexD) in devActiveASList" :key="indexD">{{ daas.label }}</a-option>
        </a-select>
      </a-form-item>

      <!-- 业务员 -->
      <a-form-item field="size" label="业务员" style="margin-top: 10px" :style="{ width: '270px' }">
        <a-input
          v-model="equipmentStore.searchForm.salesman"
          placeholder="请输入业务员名称"
          allow-clear
          style="width: 220px"
        />
      </a-form-item>

      <!-- 公司名称 -->
      <!-- <a-form-item field="size" label="客户公司" style="margin-top: 10px" :style="{ width: '270px' }">
        <a-input
          v-model="equipmentStore.searchForm.customCompany"
          placeholder="请输入客户公司名称"
          allow-clear
          style="width: 220px"
        />
      </a-form-item> -->

      <!-- 按钮 -->
      <a-form-item style="margin-top: 10px; position: relative; left: -12px">
        <a-space>
          <a-button html-type="submit" type="primary" @click="searchClick()">
            <template #icon>
              <icon-search />
            </template>
            查询
          </a-button>
          <a-button type="primary" status="danger" @click="equipmentStore.resetForm()">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'equipment_header'
})
</script>
<script lang="ts" setup>
// 引入
import { getDevTypeListApi } from '@/apis/equipment/index.ts'
import { useEquipmentStore } from '@/store'
import jsonData from '../../data/data.json'

const equipmentStore = useEquipmentStore()

// 场景选择数据
const devActiveASList = ref(jsonData.devActiveApplicationScenariosKList)

// 设备类型列表数据
const devTypeList = ref([])

// 表单的点击事件函数
const formSubmit = () => {
  console.log('提交')
}

// 表单的提交事件
const searchClick = () => {
  equipmentStore.$state.currentPge = 1
  equipmentStore.getDevListFunc()
}

// 获取设备类型列表的函数
const getDevListFunc = async () => {
  const res = await getDevTypeListApi()
  devTypeList.value = res.data
}

// 初始化
onMounted(() => {
  console.log(equipmentStore.searchForm)
  getDevListFunc()
})
</script>

<style scoped>
.formSelectIimg {
  width: 10px;
  margin-right: 10px;
}
/* .formSelect{
    display: flex;
    flex-direction: column;
  } */
.formSelect span {
  margin-left: 20px;
  display: block !important;
}
</style>
